<template>
    <div class="leftMenus" ref="leftMenu"
     :style="{width:leftWidthGet}" :data="backgroundColorGet">
        <div class="menu-head">
            <i class="el-icon-back" @click="$store.commit('leftWidthMut', '0px')"></i>
            <div class="tag">
                <span>{{title[routerConfiguration]}}</span>
            </div>
        </div>
        <!-- <div class="btn-box">
            <el-button size="mini" type="primary" @click="savePage">保存页面</el-button>
        </div> -->
            <transition name="el-fade-in">
                <Custom v-show="routerConfiguration === 'Home'"/>
            </transition>
            <transition name="el-fade-in">
                <ChartType v-show="routerConfiguration === 'chartType'"/>
            </transition>
            <transition name="el-fade-in">
                <ChartsTheme v-show="routerConfiguration === 'theme'"/>
            </transition>
            <transition name="el-fade-in">
                <ChartsList v-show="routerConfiguration === 'charts'"/>
            </transition>
            <transition name="el-fade-in">
                <Other v-show="routerConfiguration === 'other'"/>
            </transition>
        <el-dialog title="保存页面" :before-close="cancle" :visible.sync="dialogFormVisible" label-width="120px">
            <el-form>
                <el-form-item label="页面名称">
                    <el-input v-model="pageName" autocomplete="off"></el-input>
                </el-form-item>
                <!-- <el-form-item label="页面链接" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item> -->
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancle">取 消</el-button>
                <el-button type="primary" @click="addPage">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {mapGetters} from 'vuex';
import ChartType from './components/chartsType';
import Custom from './components/custom';
import ChartsTheme from './components/chartsTheme';
import ChartsList from './components/chartsList';
import Other from './components/other';

export default {
    name: 'LeftMenus',
    components: {
        ChartType,Custom,ChartsTheme,ChartsList,Other
    },
    computed: {
        ...mapGetters(['leftWidthGet', 'backgroundColorGet']),
        routerConfiguration() {
            return this.$route.params.Configuration;
        },
    },
    data(){
        return {
            dialogFormVisible: false,
            pageName: '',
            show: true,
            leftMenu: null,
            title: {
                chartType: '图表类型',
                theme: '配置主题',
                other: '其他配置',
                charts: '已配置的图表'
            }
        };
    },
    mounted() {
        this.$nextTick(()=>{ this.leftMenu = this.$refs.leftMenu; });
    },
    watch: {
        routerConfiguration: function(val) {
            console.log(val);
        }
    },
    methods: {
        addPage() {
            let page = {
                name: this.pageName,
                data: JSON.parse(JSON.stringify(this.$store.state.layout))
            };
            console.log('savePage', this.$store.state.layout);
            this.$store.state.pageList.push(page);
            this.$message.success('页面保存成功');
            this.cancle();
        },
        savePage() {
            this.dialogFormVisible = true;
        },
        cancle() {
            this.dialogFormVisible = false;
            this.pageName = '';
        },
    }

};
</script>

<style lang="scss" scoped>
.m-center{
    margin: 0 auto;
}
.opacity0{
    opacity: 0;
}
.leftMenus{
    z-index: 99;
    height: 88%;
    // width: 0px;
    margin: {
        top: 80px;
        left: 20px;
    };
    position: fixed;
    top: 0;
    left: 0;
    border-radius: 5px;
    background: #fff;
    // background: linear-gradient(0deg,#ba54f5,#e14eca);
    // background: linear-gradient(0deg,#0098f0,#00f2c3);
    box-shadow: 0 2px 22px 0 rgba(0, 0, 0, 20%), 0 2px 30px 0 rgba(0, 0, 0, 35%);
    transition: all 0.35s;
    overflow-x: hidden;
    overflow-y: hidden;
    /*修改滚动条样式*/
    ::-webkit-scrollbar{
        width:10px;
        height:10px;
    /**/
    }
    ::-webkit-scrollbar-track{
        background: rgba($color: #000000, $alpha: 0);
        border-radius:2px;
    }
    ::-webkit-scrollbar-thumb{
        background: rgba($color: #ccc, $alpha: 0.5);
        border-radius:5px;
    }
    .menu-head{
        display: flex;
        overflow: hidden;
        align-items: center;
        margin:0 12px;
        height: 50px;
        line-height: 50px;
        border-bottom: 3px solid hsla(0,0%,100%,.5);
        .tag {
            margin-left: 30px;
            height: 50px;
            line-height: 50px;
            span,i{
                font-size: 2rem;
                transition: all 0.3s;
                opacity: 1;
            }
        }
        i{
            font-size: 3rem;
            cursor: pointer;
        }
    }
}
</style>